<template>
  <div class="awardsCanvas">
    <!-- <canvas id="awardsCanvas" class="canvas"></canvas> -->
    <div id="awardsCanvas"></div>
    <ul>
      <li v-for="(item,index) in awardsList" :key="index">
        <h2>{{ item.name  }}</h2>
        <p>{{  item.value }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      awardsList:[
        {
          name:'国家级奖项',
          value:31,
        },
        {
          name:'省级奖项',
          value:53,
        },
        {
          name:'市级奖项',
          value:8,
        },
        {
          name:'其他',
          value:18,
        },
      ]
    }
  },
  mounted(){
    // this.awardsCanvasInit();
  },
  methods:{
    // awardsCanvasInit(){
    //   var canvas1 = document.getElementById("awardsCanvas");
    //   var context = canvas1.getContext("2d");
    //   var x = 28;
    //   var y = 32;
    //   var z = 40;

    //   var radian =  (2 * Math.PI / 360) * 30;
    //   canvas1.width = 200;
    //   canvas1.height = 200;
    //   context.beginPath();
    //   var maxH = 100 /Math.tan(radian);
    //   context.moveTo(0, maxH);
    //   context.lineTo(100,200);
    //   context.lineTo(200,maxH);
    //   context.lineTo(100,0);
    //   context.lineTo(0, maxH);
    //   context.moveTo(100, 200);
    //   context.lineTo(100, 0);
    //   context.fillStyle = "#0289F2";
    //   context.fill();
    //   context.closePath();
    //   // 100份中每份斜边长（勾股定理求的）
    //   var itemHypotenuseH = Math.sqrt(100*100 + maxH * maxH)/100;
    //   // 100份中每份主轴长
    //   var itemAxisH = 200 / 100;
    //   // 100份中每份直角边竖边长
    //   var itemH = maxH / 100;
    //   // 100份中每份直角边横边长
    //   var itemW = Math.sqrt((itemHypotenuseH)*(itemHypotenuseH) - itemH*itemH);

    //   context.beginPath();
    //   context.moveTo(100,itemAxisH*(x+y)+(200-itemAxisH*(x+y))/2);
    //   context.lineTo(200,itemAxisH*(x+y)+(200-itemAxisH*(x+y))/2);
    //   context.lineWidth = 1;
    //   context.strokeStyle = "#fff";
    //   context.stroke();
    //   context.closePath();

    //   context.beginPath();
    //   context.moveTo(100-itemW*x,itemH*x);
    //   context.lineTo(100,itemAxisH*x);
    //   context.lineTo(100+itemW*x,itemH*x);
    //   context.lineTo(100,0);
    //   console.log(itemHypotenuseH*x);
    //   context.fillStyle = "#FDC501";
    //   context.fill();
    //   context.closePath();

    // // 画描述线 80以上
    //   context.beginPath();
    //   context.moveTo(100,itemAxisH*(x/2));
    //   context.lineTo(200,itemAxisH*(x/2));
    //   context.lineWidth = 1;
    //   context.strokeStyle = "#fff";
    //   context.stroke();
    //   context.closePath();

    //   context.beginPath();
    //   context.moveTo(100-itemW*(x+y),itemH*(x+y));
    //   context.lineTo(100,itemAxisH*(x+y));
    //   context.lineTo(100+itemW*(x+y),itemH*(x+y));
    //   context.lineTo(100+itemW*x,itemH*x);
    //   context.lineTo(100,itemAxisH*x);
    //   context.lineTo(100-itemW*x,itemH*x);
    //   context.fillStyle = "#1FFE8D";
    //   context.fill();
    //   context.closePath();
    //   // 画描述线 70~80 13559
    //   context.beginPath();
    //   context.moveTo(100,itemAxisH*(x+y/2));
    //   context.lineTo(0,itemAxisH*(x+y/2));
    //   context.lineWidth = 1;
    //   context.strokeStyle = "#fff";
    //   context.stroke();
    //   context.closePath();

    //   context.beginPath();
    //   context.moveTo(100,0);
    //   context.lineTo(100,200);
    //   context.lineWidth = 1;
    //   context.strokeStyle = "rgba(45,71,86,0.4)";
    //   context.stroke();
    //   context.closePath();
    // }
  }
}
</script>

<style lang="scss" scoped>
  .awardsCanvas{
    width: 100%;
    height:100%;
    padding-top: 10px;
    position: relative;
    #awardsCanvas{
      width: 262px;
      height: 181px;
      background: url(../../assets/images/screen/zhuixing.png) no-repeat;
      background-size:cover;
      margin: 0 auto;
    }
    ul{
      width: 100%;
      height: 100%;
      li{
        position: absolute;
        h2{
          color: #41a6fc;
          font-size: 13px;
        }
        p{
          color: #fff;
          font-size: 13px;
          margin-top: 10px;
        }
        &:nth-child(1){
          top:15%;
          left:12%;
        }
        &:nth-child(2){
          top:4%;
          right:5%;
        }
        &:nth-child(3){
          top:42%;
          right:5%;
        }
        &:nth-child(4){
          top:52%;
          left:12%;
        }
      }
    }
  }

</style>